<template>
  <div class="contain">

    <div class="header">
      <el-form ref="form" label-width="90px" class="left">
        <el-form-item label="用户姓名">
          <el-input />
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input />
        </el-form-item>
        <el-form-item label="出发地区">
          <el-input />
        </el-form-item>
        <el-form-item label="到达目的地">
          <el-input />
        </el-form-item>
      </el-form>
      <div class="right">
        <el-button>查询</el-button>
        <el-button>重置</el-button>
      </div>
    </div>
    <el-button class="declare">审核往返申报
      <div class="undeal">1</div>
    </el-button>
    <div class="mainContent">
      <div class="tableContent">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="date" label="用户姓名" width="100" />
          <el-table-column prop="name" label="用户性质" width="120" />
          <el-table-column prop="身份证号" label="省份" width="120" />
          <el-table-column prop="手机号" label="市区" width="120" />
          <el-table-column prop="address" label="往返类型" width="120" />
          <el-table-column prop="zip" label="出发时间" width="120" />
          <el-table-column prop="zip" label="出发地区" width="120" />
          <el-table-column prop="zip" label="详细地址" width="150" />
          <el-table-column prop="zip" label="到达地区" width="120" />
          <el-table-column prop="zip" label="详细地址" width="150" />
          <el-table-column prop="zip" label="交通" width="120" />
        </el-table>
      </div>
    </div>
    <div class="block">
      <span class="demonstration">完整功能</span>
      <el-pagination
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      />
    </div>
  </div>
</template>

<script>

export default {
  components: {

  },
  data() {
    return {

    }
  }
}
</script>

<style scoped>
.header {
  padding: 40px 30px;
  width: 98%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 5px;
  margin: auto;
  border: 1px solid #e4e4e4;
  box-shadow: 3px 3px 3px rgba(201, 201, 201, 0.349019607843137);

}

.left {
  display: flex;
  align-items: center;

}

.right {
  translate: -50%;
}

.right>button {
  width: 100px;
  height: 40px;
}

.right>button:nth-child(1) {
  border: 1px solid #409eff;
  color: #409eff;
}

.declare {
  width: 190px;
  margin: 15px;
  border: 1px solid #409eff;
  color: #409eff;
  position: relative;
}

.undeal {
  position: absolute;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background-color: #ff0000;
  color: #fff;
  line-height: 20px;
  right: 0;
  top: 0;
  translate: 10px -10px;
}

.mainContent {
  height: 100vh;
  margin: 0 15px;
  border-radius: 10px;
  padding: 20px;
  border: 1px solid #e4e4e4;
}

.contain {
  width: 100%;
  height: 100%;
}

.el-form-item {
  margin: 0;
}

.tableContent {
  width: 100%;
  height: 100%;
  border: 1px solid #e4e4e4;
}
</style>
